<template>
    <view class="booking-item" @click="goDetail">
        <view class="item-header">
            <iconsfont color="#C4181F" customIcons="icon-shijian" size="48"></iconsfont>
            <text class="time text-red">预约时间: {{ data.ReservationTime }}</text>
            <text class="text-tip text-tip-9" v-if="type == 5 && data.IsOvertime">已超时</text>
            <text class="text-tip" v-if="type == 5 && !data.IsOvertime && data.State == 1">待到店</text>
            <text class="text-tip text-red" v-if="type == 5 && !data.IsOvertime && data.State == 2">已取消</text>
            <text class="text-tip text-greed" v-if="type == 5 && !data.IsOvertime && data.State == 3">已到店</text>
        </view>
        <view class="item-main">
            <view class="user-info">
                <view class="info-header">
                    <view class="info-header-desc">
                        <text class="contact-name">{{ data.ContactName }}</text>
                        <text class="contact-tel flex-fill">{{ data.ContactTel }}</text>
                    </view>
                    <iconsfont color="#C4181F" customIcons="icon-dianhua1" size="40" @click.stop="telFn"></iconsfont>
                </view>
            </view>
            <view class="main">
                <view class="car-info">
                    <image class="car-image" mode="aspectFill" :src="easyGetImgUrl(data.CarBrandImage)"></image>
                    <view>
                        <view>
                            <text>{{ data.CarBrandName }}</text>
                            <text class="car-number">{{ data.CarNumber }}</text>
                        </view>
                        <text class="text-tip flex-fill">{{ data.CarTypeName }} {{ data.CarAttributeName }}</text>
                    </view>
                </view>
                <view>
                    <text class="tag" v-for="(item, index) in getItems(data.ItemNames)" :key="index">{{ item }}</text>
                </view>
            </view>
        </view>
        <view class="action">
            <view class="edit-time"
                ><view v-if="type == 3">修改时间：{{ data.NewReservationTime }}</view></view
            >
            <button
                v-if="type == 1 || (type == 5 && data.IsOvertime && data.IsOpAppointment)"
                class="btn btn-main"
                @click.stop="confirm">
                确认到店
            </button>
            <button v-if="type == 3" class="btn btn-main" @click.stop="editconfirm">马上确认</button>
            <button v-if="type == 4" class="btn btn-main" @click.stop="closeconfirm">马上确认</button>
        </view>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
// import { Confirm,Appointment } from "@/service/api/reservation.js"
export default {
    props: {
        data: {
            type: Object,
            default: () => {},
        },
        type: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {}
    },
    mounted() {},
    onShow() {},
    methods: {
        ...mapMutations(["UP_BOOKING_VIEW"]),
        getItems(text) {
            if (text) {
                return text.split(",")
            }
            return []
        },
        //确认到店
        confirm() {
            var that = this
            let param = {}
            let path = "?orderId=" + this.data.OrderId
            Appointment(param, path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("确认成功")
                    setTimeout((e) => {
                        that.UP_BOOKING_VIEW(new Date().getTime())
                    }, 1000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //确认修改
        editconfirm() {
            var that = this
            let param = {}
            let path = "?orderId=" + this.data.OrderId + "&confirmState=1&dayTimesId=0"
            Confirm(param, path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("确认成功")
                    setTimeout((e) => {
                        that.UP_BOOKING_VIEW(new Date().getTime())
                    }, 1000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //同意取消
        closeconfirm() {
            var that = this
            let param = {}
            let path = "?orderId=" + this.data.OrderId + "&confirmState=1"
            Confirm(param, path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("确认成功")
                    setTimeout((e) => {
                        that.UP_BOOKING_VIEW(new Date().getTime())
                    }, 1000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        telFn() {
            let tel = this.data.ContactTel
            uni.makePhoneCall({
                phoneNumber: tel,
            })
        },
        goDetail() {
            this.easyGoTo("/pages/booking/detail?orderId=" + this.data.OrderId + "&type=" + this.type)
        },
    },
}
</script>

<style lang="scss">
.booking-item {
    background: $card-bg;
    border-radius: $border-radius-10;
    margin-bottom: $app-page-padding;
    padding: $app-page-padding;
    .item-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: $app-page-padding;
        .time {
            display: flex;
            flex: 1;
            font-weight: bold;
        }
        .icon {
            margin-right: 20rpx;
        }
    }
    .item-main {
        border: solid 1rpx #f4f4f4;
        border-radius: 8rpx;
        margin-bottom: $app-page-padding;
        .user-info {
            align-items: center;
            .info-header {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                background: #f4f4f4;
                height: 76rpx;
                align-items: center;
                padding: 0 $app-page-padding;
                .info-header-desc {
                    flex: 1;
                    .contact-name {
                        font-weight: bold;
                        font-size: $font-size-32;
                    }
                    .contact-tel {
                        color: $color-black;
                    }
                }
            }
        }
        .main {
            padding: $app-page-padding;
        }
        .car-info {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 20rpx;
            .car-image {
                width: 80rpx;
                height: 80rpx;
                margin-right: 10rpx;
            }
        }
        text {
            margin-right: 10rpx;
        }
    }
}
.tag {
    border-radius: 4px;
    border: 1px solid #4d4f9b;
    padding: 4rpx 8rpx;
    color: #4d4f9b;
    font-weight: bold;
    white-space: nowrap;
    margin-bottom: 10rpx;
    display: inline-block;
}
.action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .edit-time {
        font-weight: bold;
        font-size: 26rpx;
        color: $app-color-main;
    }
    .btn {
        width: 158rpx;
        height: 56rpx;
        background: $app-color-main;
        border-radius: 28rpx;
        font-size: 26rpx;
        color: #ffffff;
        margin: 0;
    }
}
.car-number {
    font-weight: bold;
    color: #0091ff;
    border: solid 1rpx #0091ff;
    font-size: $font-size-20;
    border-radius: 8rpx;
    padding: 4rpx 6rpx;
}
.text-red {
    color: $app-color-main;
}
.text-greed {
    color: #2cd334;
}
.text-tip-9 {
    color: $color-gray-3;
}
</style>
